<template>
  <!--模板【登陆页面】-->
  <div class="login_container">
    <!--根div-->
    <!--登陆块-->
    <div class="login_box">
      <!--头像-->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="头像" />
      </div>
      <!-- 表单区域 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login_form"
        label-width="0"
      >
        <!-- 用户名 -->
        <el-form-item prop="userName">
          <el-input
            v-model="loginForm.userName"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="userPwd">
          <el-input
            v-model="loginForm.userPwd"
            prefix-icon="el-icon-unlock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login()">提交</el-button>
          <el-button type="info" @click="resetLoginForm()">重置</el-button>
        </el-form-item>
      </el-form>
      <Modal
        v-model="modal1"
        title="人脸检测"
        @on-ok="ok"
        @on-cancel="cancel">
        <div class="media">
            <video id="video" width="450" height="300" src="" autoplay></video>
            <canvas id="canvas" width="450" height="300"></canvas>
        </div>
       </Modal>
    </div> 
  </div>
</template>
<script>
//java逻辑
import axios from "axios";
export default {
  // data() 函数，用于存放各种数据
  data() {
    return {
      // 表单数据对象,":model"绑定表单数据
      loginForm: {
        userName: "admin",
        userPwd: "123456",
      },
      video: null,
      userContext: null,
      modal1:false,
      // 验证表单对象,":rules"绑定表单验证
      loginRules: {
        // 校验用户名,"prop"绑定表单中的属性
        userName: [
          // 必填项验证(必填项、提示信息、失去焦点后触发)
          { required: true, message: "用户名为必填项", trigger: "blur" },
          { min: 3, max: 12, message: "长度在3到12个字符", trigger: "blur" }, //长度验证
        ],
        // 校验密码
        userPwd: [
          { required: true, message: "用户密码为必填项", trigger: "blur" },
          { min: 6, max: 10, message: "长度在6~10个字符", trigger: "blur" },
        ],
      },
    };
  },
  // 用于存放各种方法
  methods: {
    // 重置表单, this.$refs.表单ref.重置方法
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    // 登陆方法
    login() {
      // 1.验证校验，valid用来查看是否符合验证规则
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return; // 验证失败
        // 向后台test方法提交，访问后台
        const {data:resp} = await axios.post(
          "http://localhost:8082/login",
          this.loginForm
        );
        if (resp.flag == "ok") {
          window.sessionStorage.setItem("user",this.loginForm.userName);
          window.sessionStorage.setItem("roleId",resp.user.roleId);
          // 人脸识别
            this.modal1 = true;
            this.callCamera();
          // 人脸识别成功进行路由跳转
          
        } else {
          this.$message.error(resp.flag);
        }
      });
    },
    ok () {
        this.userContext.drawImage(video, 0, 0, 450, 300);
        var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
        //拿到bash64格式的照片信息
        var faceBase = userImgSrc.split(",")[1];
        axios.get("http://localhost:8082/search?faceBase="+faceBase).then(response=>{
            // if(response.data.result.face_token!=null){
            //               this.stopNavigator()

            //     this.$router.push({path:"/main"}) // 页面路由跳转
            // }
            if(response.data==1){
                this.stopNavigator()

                this.$router.push({path:"/main"}); // 页面路由跳转
            }else if(response.data==2){
                this.stopNavigator()

                this.$message.warning("用户没有添加人脸,请联系管理员添加人脸");
            }else if(response.data==3){
                this.stopNavigator()

                this.$message.warning("没有该用户，请联系管理员进行用户注册");
            }else if(response.data==4){
                this.stopNavigator()

                this.$message.error("人脸识别失败");
            }
        })
    },
    cancel () {
            this.stopNavigator()
    },
    callCamera() {
      /**调用摄像头，获取媒体视频流**/
      this.video = document.getElementById("video");
      //返回画布二维画图环境
      this.userContext = canvas.getContext("2d");
      var getUserMedia =
        //浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;
      //getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
      getUserMedia.call(
        navigator,
        { video: true, audio: false },
        function (localMediaStream) {
          //获取摄像头捕捉的视频流
          video.srcObject = localMediaStream;
        },
        function (e) {
          console.log("获取摄像头失败！！");
        }
      );
    },
    stopNavigator () {
        this.video.srcObject.getTracks()[0].stop()
    }
  },
};
</script>
<style lang="less" scoped>
//加入依赖符合less语法
// 根节点样式，全覆盖的背景色
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
// 登陆块，大小，背景色，边框圆角，居中(绝对位置)，
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); //以自己长宽为准进行移动
  //以及设置头像背景模块的大小，圆角，位置
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 0 2px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #eee;
    // 头像的大小、圆角、位置
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
//按钮：固定定位，条形布局
.btns {
  display: flex;
  justify-content: flex-end;
}
// form表单：位置(距底部为0)、大小、边框
.login_form {
  position: absolute;
  bottom: 0%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

/**/
h1 {
  color: #fff;
  text-align: center;
  line-height: 80px;
}

.media {
  width: 534px;
  height: 400px;
  margin: 40px auto 0;
}

#register {
  width: 200px;
  height: 50px;
  background-color: #2196f3;
  margin: 60px auto 0;
  text-align: center;
  line-height: 50px;
  color: #fff;
  border-radius: 10px;
}

#canvas {
  display: none;
}

#shuru {
  width: 200px;
  height: 50px;
  background-color: #2196f3;
  margin: 20px auto 0;
}
</style>
